<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <span class="svg-icon svg-icon-primary svg-icon-2x">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <polygon points="0 0 24 0 24 24 0 24" />
                                    <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,
                        8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,
                        4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z"
                                        fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                    <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,
                        15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,
                        21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000"
                                        fill-rule="nonzero" />
                                </g>
                            </svg>
                        </span>
                    </span>
                    <h3 class="card-label"> 分配管理员 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                        <button class="btn btn-link" @click="resetAll()">
                            <b-spinner type="grow" small></b-spinner><strong>刷 新</strong>
                        </button>
                    </div>
                </div>
            </div>
            <!--分页组件-->
            <el-table style="width: 100%" stripe border highlight-current-row :data="adminList"
                ref="enquiry"
                :expand-row-keys="expands" 
                :row-key="getRowKeys" 
                @expand-change="expandRow"            
                @row-dblclick = "handleRowClick">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-table :data="scope.row.subList" align="center" style="text-align: center;margin:auto;width: 80%;" :header-cell-style="{ background:'#fff',height:'20px',color:'#000000',}" >
                            <el-table-column prop="account" label="账号" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip label="状态" width="80">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.status == 0">
                                        <span class="label label-lg label-light-primary label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">正常</span>
                                    </div>
                                    <div v-else-if="scope.row.status == 1">
                                        <span class="label label-lg label-light-success label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">冻结</span>
                                    </div>
                                    <div v-else-if="scope.row.status == 2">
                                        <span class="label label-lg label-light-danger label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">禁用</span>
                                    </div>
                                    <div v-else>
                                        <span class="label label-lg label-light-warning label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">未知</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="level" show-overflow-tooltip label="级别" width="80">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.level == 1">
                                        <span class="label label-lg label-light-primary label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">全平台管理员</span>
                                    </div>
                                    <div v-else-if="scope.row.level == 2">
                                        <span class="label label-lg label-light-success label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">子系统管理员</span>
                                    </div>
                                    <div v-else>
                                        <span class="label label-lg label-light-warning label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">未知</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
                            <el-table-column align="center" label="操作" fixed="right" min-width="80">
                                <template slot-scope="scopeSub">
                                    <!--scope.row当前行的对象-->
                                    <a href="javascript:;"
                                    v-permission="{ action: '/oauthAdmin/delete', effect: 'display' }"
                                    @click="delAdminSys(scopeSub.row,scope.row)" class="btn btn-sm btn-clean btn-icon"
                                        title="移除管理员">
                                        <span class="svg-icon svg-icon-danger svg-icon-2x">
                                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                    <polygon points="0 0 24 0 24 24 0 24"/>
                                                    <path d="M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,
                                                    11 9,11 Z M21,8 L17,8 C16.4477153,8 16,7.55228475 16,7 C16,6.44771525 16.4477153,6 17,6 L21,6 C21.5522847,6 22,6.44771525 22,7 C22,7.55228475 21.5522847,8 21,8 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                                    <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,
                                                    21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                                                </g>
                                            </svg>
                                        </span>
                                    </a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="序号" width="50">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="name" show-overflow-tooltip label="隶属平台"
                    min-width="80"></el-table-column>
                <el-table-column align="left" prop="status" show-overflow-tooltip label="状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0"
                        class="symbol symbol-30 symbol-circle symbol-light-primary">
                            <span
                                class="symbol-label font-size-h8">正常</span>
                        </div>
                        <div v-else-if="scope.row.status == 1"
                        class="symbol symbol-30 symbol-circle symbol-light-warning">
                            <span
                                class="symbol-label font-size-h8">冻结</span>
                        </div>
                        <div v-else-if="scope.row.status == 2" 
                        class="symbol symbol-30 symbol-circle symbol-light-danger">
                            <span
                                class="symbol-label font-size-h8">禁用</span>
                        </div>
                        <div v-else 
                        class="symbol symbol-30 symbol-circle symbol-light-dark">
                            <span class="symbol-label font-size-h8">未知</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" show-overflow-tooltip prop="createTime" label="创建日期">
                </el-table-column>
                <!-- <el-table-column align="left" prop="updateTime" label="修改日期"
                    min-width="100"></el-table-column> -->
                <el-table-column align="center" label="操作" fixed="left" width="150">
                    <template slot-scope="scope">
                        <button @click="addAdmin(scope.row)" class="btn btn-link"
                        v-permission="{ action: '/oauthAdmin/add', effect: 'display' }"
                        title="添加管理员">添加管理员</button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <AccountAdd ref="accountAddRef"></AccountAdd>
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";

import AccountAdd from "@/view/oauth/oauth-admin/oauth-admin-add.vue";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: {},
            adminList: [],
            subList: [],
            expands: [],
            sels: [], //当前选框选中的值
        }
    },
    components: {
        AccountAdd
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "分配管理员" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods: {
        handleRowClick(row, event, column) {
            //点击行展开，enquiry为主表table的ref属性值
            this.$refs.enquiry.toggleRowExpansion(row);
            console.log("row",row);
        },
        initList() {
            showWating({ renderBody: "tableBody" });
            var params = {};
            apiUtil.query(process.env.VUE_APP_OAUTH_API + "/oauthSysMode/listAll", params).then(({ data }) => {
                this.adminList = data.data;//给结果集赋值
                for(var i in this.expands){
                    this.reGetSubList(this.expands[i]);
                }
            });
        },
        getRowKeys(row) {
            return row.id;
        },
        expandRow:function(row, expandedRows) {//展开与收缩事件
            let _this = this;
            if(_this.expands.indexOf(row.id) >= 0){//收缩事件                
                let newExpands=[];
                for(let i=0; i<this.expands.length; i++){
                    if(this.expands[i]!=row.id){
                        newExpands.push(this.expands[i]);
                    }
                }
                _this.expands=newExpands;
                return;
            }else{
                this.getSubList(row);//展开事件
            }
        },
        getSubList(row) {
            
            //遍历主表dataList
            this.adminList.forEach((item, index) => {
                if(item.id == row.id){//判断当前展开的行      
                    showWating({renderBody:"tableBody"});          
                    //请求子表后台接口
                    var params = {};
                    apiUtil.post(process.env.VUE_APP_OAUTH_API + "/oauthAdmin/listAll?sysModeId="+item.id, params).then(({ data }) => {
                        this.adminList[index].subList = data.data;//给结果集赋值
                        //如果需要默认展开所有行，将:row-key="getRowKeys"得到的Id添加到expands数组
                        //直接使用属性default-expand-all会使子表数据显示不出来，索性全部加到this.expands
                        this.expands.push(item.id)
                    });
                }                
            })
        },
        reGetSubList(id){
            //遍历主表dataList
            this.adminList.forEach((item, index) => {
                if(item.id == id){//判断当前展开的行      
                    showWating({renderBody:"tableBody"});          
                    //请求子表后台接口
                    var params = {};
                    apiUtil.post(process.env.VUE_APP_OAUTH_API + "/oauthAdmin/listAll?sysModeId="+item.id, params).then(({ data }) => {
                        // this.adminList[index].subList = data.data;//给结果集赋值
                        //如果需要默认展开所有行，将:row-key="getRowKeys"得到的Id添加到expands数组
                        //直接使用属性default-expand-all会使子表数据显示不出来，索性全部加到this.expands
                        // this.expands.push(item.id)
                        this.$set(this.adminList[index], "subList", data.data);                        
                    });
                }                
            })
        },
        search() {
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        addAdmin(row) {
            this.$refs.accountAddRef.showModal(row.id);
        },
        delAdminSys(row,parentRow) {
            this.$confirm('确定要移除该管理员？', "提示", { type: "warning", }).then(() => {
                var params = { accountId: row.id, sysModeId: parentRow.id };               
                apiUtil.delete(process.env.VUE_APP_OAUTH_API + '/oauthAdmin/delete', params).then(data => {
                    if (data.data.success) {
                        handleAlert("移除成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("移除失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;
        },
    }
};
</script>